module.exports = {
  content: ['./src/**/*.tsx'],
  theme: {
    colors: {
      transparent: 'rgba(0,0,0,0)',
      transparentw: 'rgba(255,255,255,0)',
      current: 'currentColor',
      black: 'rgba(0,0,0)',
      white: 'rgba(255,255,255)',
      // NEW DESIGN SYSTEM
      primary: 'rgba(0,102,255)',
      'primary-dark': 'rgba(0,88,219)',
      red: 'rgba(255,13,0)',
      'red-dark': 'rgba(230,11,0)',
      orange: 'rgba(255,149,0)',
      'orange-dark': 'rgba(230,134,0)',
      yellow: 'rgba(255,204,0)',
      'yellow-dark': 'rgba(230,184,0)',
      green: 'rgba(50,195,86)',
      'green-dark': 'rgba(45,174,77)',
      gray: {
        1: 'rgba(249,249,252)',
        5: 'rgba(243,243,248)',
        10: 'rgba(229,229,235)',
        20: 'rgba(209,209,215)',
        30: 'rgba(199,199,205)',
        40: 'rgba(174,174,179)',
        50: 'rgba(142,142,148)',
        60: 'rgba(99,99,103)',
        70: 'rgba(72,72,75)',
        80: 'rgba(58,58,59)',
        90: 'rgba(44,44,48)',
        100: 'rgba(24,24,27)',
      },
      debug: 'green',
    },
    extend: {
      fontSize: {
        'supporting-1': ['0.5rem', { lineHeight: '0.625rem' }],
        'supporting-2': ['0.625rem', { lineHeight: '0.75rem' }],
        xs: ['0.75rem', { lineHeight: '1rem' }],
        sm: ['0.875rem', { lineHeight: '1.25rem' }],
        base: ['1rem', { lineHeight: '1.5rem' }],
        lg: ['1.125rem', { lineHeight: '1.75rem' }],
        xl: ['1.25rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
        '5xl': ['3rem', { lineHeight: '3.6rem' }],
        '5xl-banner': ['3rem', { lineHeight: '0' }],
        '6xl': ['3.75rem', { lineHeight: '1' }],
        '7xl': ['4.5rem', { lineHeight: '1' }],
        '8xl': ['6rem', { lineHeight: '1' }],
        '9xl': ['8rem', { lineHeight: '1' }],
      },
    },
  },
  plugins: [],
  corePlugins: require('tailwind-rn/unsupported-core-plugins'),
};
